<template>
	<view class="card">
		<view class="find_nav_show" v-if="isshowtop" :style="'padding-top:'+ (statusBarHeight+20) +'rpx'">
			<view class="nav_content">
				
				<view class="find_nav_text">族谱</view>
			</view>
		</view>
		<view class="card_top" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/97536e249a28e9d222.jpg)'}" style="display: flex; align-items: center;justify-content: center;" >
			<view class="card_top_name">{{cardInfo.title}}</view>
			<view class="card_top_name" style="margin-left: 20rpx;">
				{{cardInfo.pinyin}}
			</view>
		</view>
		<view class="scroll_people">
			<view class="scroll_people_head" :style="'padding-top:'+ (statusBarHeight+20) +'rpx;'">
				<view class="zupus_item flex ali-c" hover-class="none">
					<view class="zupus_item_info flex1">
						<view class="flex ali-c">
							<view class="zupus_item_img" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/f2eb057df73c5cc33b.png)'}"></view>
							<view class="zupu_names">姓氏起源<view class="zupu_names_line" style="background-color: #CDDC39;"></view></view>
						</view>						
						<view class="flex ali-c jus-b fqr_text">
						</view>
						<view class="rich_text"><rich-text :nodes="cardInfo.content"></rich-text></view>
					</view>
				</view>

				<view class="zupus_item flex ali-c" hover-class="none">
					<view class="zupus_item_info flex1">
						<view class="flex ali-c">
							<view class="zupus_item_img" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/dad1e3f86b4c8211a5.png)'}"></view>
							<view class="zupu_names">地域分布<view class="zupu_names_line" style="background-color: #41A3FA;"></view></view>
						</view>	
						
						<view class="flex ali-c jus-b fqr_text">
						</view>
						<view class="rich_text"><rich-text :nodes="cardInfo.distribution_content"></rich-text></view>
					</view>
				</view>

				<view class="zupus_item flex ali-c" hover-class="none"
					style="display: flex;flex-wrap:wrap; justify-content: center;">

					<view class="zupus_box">
						<view v-for="(item,index) in cardInfo.area" :key="index" class="zupus_box_info flex1">
							<view class="indicia" style="width: 30%;">
								{{item.title ||''}}
							</view>

							<view class="flex" style="width: 30%;">
								占比<view class="indicia">{{item.proportion || ''}}</view>
							</view>

							<view class="flex" style="width: 40%;">
								分布城市<view class="indicia">{{item.num ||''}}个</view>
							</view>
						</view>
					</view>

				</view>


				<view class="zupus_item flex ali-c" hover-class="none">
					<view class="zupus_item_info flex1">
						<view class="flex ali-c">
							<view class="zupus_item_img" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/5869ef6d1f607b8e43.png)'}"></view>
							<view class="zupu_names">民族分布<view class="zupu_names_line" style="background-color: #55DDE6;"></view></view>
						</view>
						
						<view class="flex ali-c jus-b fqr_text">
						</view>
						<view class="rich_text"><rich-text :nodes="cardInfo.nations_content"></rich-text></view>
					</view>
				</view>

				<view class="zupus_item flex ali-c" hover-class="none"
					style="display: flex;flex-wrap:wrap; justify-content: center;">

					<view class="zupus_box">
						<view v-for="(item1,index) in cardInfo.fenbu" :key="index" class="zupus_box_info flex1">
							<view class="flex ali-c">
								<view style="width: 28rpx;height: 28rpx;border-radius: 50%;background-color: #E94444;margin-right: 20rpx;"></view>
								<view class="">
									{{item1.title ||''}}
								</view>
							</view>							
							<view style="font-weight: 600;font-size: 32rpx;">{{item1.proportion || ''}}</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<!-- <view class="" style="display: flex; justify-content: center;">
			<image  style="width: 750rpx;height: 30rpx;" src="@/static/img/640.gif" mode="heightFix"></image>
		</view> -->



	</view>
</template>

<script>
	import {
		getCardInfo
	} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {
		staticurl,
		photo_cdn1
	} = config.baseUrl;
	export default {
		data() {
			return {
				photo_cdn1,
				info_zupu_list: {
					info: {}
				},
				family_id: '',
				look_num: 0,
				isshowlogin: false,
				isshowtop: false,
				statusBarHeight: 0, //状态栏高度
				sm_namecard: {}, //扫码查出来的族谱的信息
				source_type: "3", //3默认  2姓名卡

				cardInfo: {}
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.ongetCardInfo(options.id);
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
		},
		methods: {
			ongetCardInfo(e) {
				getCardInfo({
					id: e
				}).then(res => {
					console.log(res)
					this.cardInfo = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./card.scss"
</style>